<template>
	<!--企业数据交易账户-->
	<view class="padding-bottom-lg">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">
				<view class="custom-title">企业数据交易账户</view>
			</block>
		</cu-custom>
		<view class="progress1 padding-top-32">
			<view class="progress-circle-1">
				<view class="complate-content">
					<view class="uncomplate-content"></view>
				</view>
				<text class="progress-text">基本信息</text>
			</view>
			<view class="progress-line1"></view>
			<view class="progress-circle-gray">
				<text class="progress-circle-number">2</text>
				<text class="progress-text">申请代表</text>
			</view>
			<view class="progress-line1"></view>
			<view class="progress-circle-gray">
				<text class="progress-circle-number">3</text>
				<text class="progress-text">确认代表</text>
			</view>
			<view class="progress-line1"></view>
			<view class="progress-circle-gray">
				<text class="progress-circle-number">4</text>
				<text class="progress-text">附件上传</text>
			</view>
			<view class="progress-line1"></view>
			<view class="progress-circle-gray">
				<text class="progress-circle-number">5</text>
				<text class="progress-text">附件寄送</text>
			</view>
		</view>
		<view class="margin-32 padding-32 bg-white radius-48">

			<view class="basic-qy-name">企业名称：</view>
			<input class="basic-qy-input " v-model="form.company_name" placeholder="请输入企业名称"></input>

			<view class="basic-update-title padding-top-32">
				《营业执照》副本复印件：
			</view>
			<view @click="ChooseImage(1)" class="yyzz-content flex align-center justify-center">
				<view class="yyzz flex align-center justify-center"
					:style="{backgroundImage:`url(${form.zhizhao_url})`}">
					<view class="camera-content flex align-center justify-center">
						<image src="https://txr001.zthj.net/static/camera.png" class="camara-img"></image>
					</view>
				</view>
			</view>
			<view class="padding-top-32 update-info">
				注:1.请上传最新营业执照，JPG或PNG格式，大小不超过5MB，
				<view style="padding-left: 50rpx;">拍摄时确保内容完整,字体清晰,亮度均匀；</view>
				<view class="padding-left">2.营业执照信息必须与工商信息一致;</view>
				<view class="padding-left">3.营业执照必须加盖企业公章。</view>
			</view>

			<view class="basic-qy-name padding-top-48">统一社会信用代码：</view>
			<input class="basic-qy-input margin-top" v-model="form.taxpayer_Identification_number"
				placeholder="请输入代码"></input>

			<view class="basic-qy-name padding-top-48">注册地址：</view>
			<input class="basic-qy-input" placeholder="请输入注册地址" v-model="form.registered_address"></input>

			<view class="basic-qy-name padding-top-48">所属行业：</view>
			<radio-group class="block" @change="tradeChange">
				<view class="padding-top-lg padding-bottom">
					<view class="flex">
						<view class="flex-sub flex justify-start align-center">
							<radio value="1" :checked="form.trade==1" style="transform:scale(0.8)"></radio>
							<text class="basic-radio-title">制造业</text>
						</view>
						<view class="flex-sub flex justify-start align-center">
							<radio value="2" :checked="form.trade==2" style="transform:scale(0.8)"></radio>
							<text class="basic-radio-title">建筑行业</text>
						</view>
					</view>
					<view class="flex padding-top-40 align-start">
						<view class="flex-sub flex justify-start align-center">
							<radio value="3" :checked="form.trade==3" style="transform:scale(0.8)"></radio>
							<text class="basic-radio-title">批发和零售业</text>
						</view>
						<view class="flex-sub flex justify-start align-start">
							<radio value="4" :checked="form.trade==4" style="transform:scale(0.8)"></radio>
							<text class="basic-radio-title margin-top-6">交通运输、仓储和邮政业</text>
						</view>
					</view>
					<view class="flex padding-top-40 align-start">
						<view class="flex-sub flex justify-start align-center">
							<radio value="5" :checked="form.trade==5" style="transform:scale(0.8)"></radio>
							<text class="basic-radio-title">住宿和餐饮业</text>
						</view>
						<view class="flex-sub flex justify-start align-start">
							<radio value="6" :checked="form.trade==6" style="transform:scale(0.8)"></radio>
							<text class="basic-radio-title margin-top-6">信息传输、软件和信息技术服务业</text>
						</view>
					</view>
					<view class="flex padding-top-40 align-start">
						<view class="flex-sub flex justify-start align-center">
							<radio value="7" :checked="form.trade==7" style="transform:scale(0.8)"></radio>
							<text class="basic-radio-title">金融业</text>
						</view>
						<view class="flex-sub flex justify-start align-center">
							<radio value="8" :checked="form.trade==8" style="transform:scale(0.8)"></radio>
							<text class="basic-radio-title">租赁和商务服务业</text>
						</view>
					</view>
					<view class="flex padding-top-40 align-start">
						<view class="flex-sub flex justify-start align-start">
							<radio value="9" :checked="form.trade==9" style="transform:scale(0.8)"></radio>
							<text class="basic-radio-title margin-top-6">居民服务、修理和其他服务业</text>
						</view>
						<view class="flex-sub flex justify-start align-center">
							<radio value="10" :checked="form.trade==10" style="transform:scale(0.8)"></radio>
							<text class="basic-radio-title">教育</text>
						</view>
					</view>
					<view class="flex padding-top-40">
						<view class="flex-sub flex justify-start align-start">
							<radio value="11" :checked="form.trade==11" style="transform:scale(0.8)"></radio>
							<text class="basic-radio-title margin-top-6">文化、体育和娱乐业</text>
						</view>
					</view>
					<view class="flex padding-top-40">
						<view class="flex-sub flex justify-start align-center">
							<radio value="12" :checked="form.trade==12" style="transform:scale(0.8)"></radio>
							<text class="basic-radio-title">其他</text>
						</view>
					</view>
				</view>
				<input class="basic-qy-input margin-top" :disabled="trade_status" v-model="form.trade_notes"
					placeholder="请输入所属行业"></input>
			</radio-group>

			<view class="basic-qy-name padding-top-48">实际经营地址：</view>
			<input class="basic-qy-input" placeholder="请输入实际经营地址" v-model="form.business_address"></input>

			<view class="basic-qy-name padding-top-48">法人代表姓名：</view>
			<input class="basic-qy-input" placeholder="请输入法人代表姓名" v-model="form.leader"></input>

			<view class="basic-qy-name padding-top-48">法人代表联系地址：</view>
			<input class="basic-qy-input" placeholder="请输入法人代表联系地址" v-model="form.address"></input>

			<view class="basic-qy-name padding-top-48">法人身份证明类型：</view>
			<radio-group class="block " @change="idchange">
				<view class="padding-top-lg padding-bottom">
					<view class="flex align-start">
						<view class="flex-sub flex align-center justify-start">
							<radio value="1" :checked="form.id_type==1" style="transform:scale(0.8)"></radio>
							<text class="basic-radio-title-two">身份证</text>
						</view>
						<view class="flex-sub flex align-start justify-start">
							<radio value="2" :checked="form.id_type==2" style="transform:scale(0.8)"></radio>
							<text class="basic-radio-title-two margin-top-6">港澳居民来往内地通行证</text>
						</view>
					</view>
					<view class="flex padding-top-40">
						<view class="flex-sub flex align-start justify-start">
							<radio value="3" :checked="form.id_type==3" style="transform:scale(0.8)"></radio>
							<text class="basic-radio-title-two margin-top-6">台湾居民来往大陆通行证</text>
						</view>
						<view class="flex-sub flex align-start justify-start">
							<radio value="4" :checked="form.id_type==4" style="transform:scale(0.8)"></radio>
							<text class="basic-radio-title-two margin-top-6">护照或外国人永久居留证</text>
						</view>
					</view>
				</view>
			</radio-group>

			<view class="basic-qy-name padding-top-48">证件号码：</view>
			<input class="basic-qy-input" v-model="form.leader_idcard" placeholder="请输入证件号码"></input>

			<view class="basic-qy-name padding-top-48">认证地区：</view>
			<view class="cu-form-group">
				<picker mode="selector" @change="bindPickerChange" :value="index" :range="list">
					<view class="picker">
						{{list[index]}}
					</view>
				</picker>
			</view>

			<view class="basic-qy-name padding-top-48">联系人/被授权人手机：</view>
			<input class="basic-qy-input" v-model="form.mobile" placeholder="请输入手机号"></input>

			<view class="basic-qy-name padding-top-48">联系人/被授权人邮箱：</view>
			<input class="basic-qy-input" v-model="form.email" placeholder="请输入电子邮件"></input>

			<view class="basic-qy-name padding-top-48">邮编：</view>
			<input class="basic-qy-input" v-model="form.zipcode" placeholder="请输入邮编"></input>

			<view class="padding flex flex-wrap justify-center align-center">
				<button class="cu-btn round submit-btn" @click="toNext">下一步</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					id: 0,
					company_name: '',
					taxpayer_Identification_number: '',
					registered_address: '',
					trade: 1,
					trade_notes: '',
					business_address: '',
					leader: '',
					address: '',
					id_type: 1,
					leader_idcard: '',
					mobile: '',
					email: '',
					zhizhao_url: 'https://txr001.zthj.net/static/yyzz.png',
					region: '中国大陆',
					zipcode: ''
				},
				index: 0,
				list: ['中国大陆'],
				trade_status: true,


			}
		},
		onLoad(options) {
			this.getInfo();
		},
		methods: {
			bindPickerChange(e) {
				this.index = e.detail.value
				this.form.region = this.list[e.detail.value];
			},
			postImg(imgFilePaths, type) {
				uni.uploadFile({
					url: 'https://qd.zthj.net/api/Common/upload',
					filePath: imgFilePaths,
					name: 'file',
					success: (res) => {
						let info = JSON.parse(res.data)
						// console.log(res.data);

						this.form.zhizhao_url = info.data.fullurl;

					}
				});
			},
			ChooseImage(type) {
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// console.log();
						that.postImg(res.tempFilePaths[0], type)
					}
				});
			},
			async toNext() {
				if (!this.form.company_name) {
					uni.showToast({
						title: '请输入企业名称',
						icon: 'none'
					})
					return
				}
				if (this.form.trade == 12 && !this.form.trade_notes) {
					uni.showToast({
						title: '请输入所属行业',
						icon: 'none'
					})
					return
				}
				if (this.form.zhizhao_url == 'https://txr001.zthj.net/static/yyzz.png') {
					uni.showToast({
						title: '请上传营业执照副本复印件',
						icon: 'none'
					})
					return
				}
				if (!this.form.taxpayer_Identification_number) {
					uni.showToast({
						title: '请输入组织机构代码或统一社会信用代码',
						icon: 'none'
					})
					return
				}
				if (!this.form.registered_address) {
					uni.showToast({
						title: '请输入注册地址',
						icon: 'none'
					})
					return
				}
				if (!this.form.business_address) {
					uni.showToast({
						title: '请输入实际经营地址',
						icon: 'none'
					})
					return
				}
				if (!this.form.leader_idcard) {
					uni.showToast({
						title: '请输入证件号码',
						icon: 'none'
					})
					return
				}
				if (!this.form.zipcode) {
					uni.showToast({
						title: '请输入邮编',
						icon: 'none'
					})
					return
				}

				let mobilereg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
				if (!this.form.mobile) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				} else if (!mobilereg.test(this.form.mobile)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
				let email_reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
				if (!this.form.email) {
					uni.showToast({
						title: '请输入邮箱',
						icon: 'none'
					})
					return
				} else if (!email_reg.test(this.form.email)) {
					uni.showToast({
						title: '请输入正确的邮箱',
						icon: 'none'
					})
					return
				}
				
				let res;
				if (this.form.id == 0) {
					res = await this.$api.addJiaoyi(this.form);
				} else {
					res = await this.$api.updateJiaoyi(this.form);
					// url = "https://qd.zthj.net/api/userinfo/updateBasic";
				}
				if (res.code == 1) {
					this.form.id = res.data.renzheng_id;
					uni.navigateTo({
						url: "/subpackage/pages/mine/company/trafficAccountTwo?id=" + this.form.id
					})
				} else {
					uni.showToast({
						title: '该企业您已提交过相关信息！',
						icon: 'none'
					})
				}
				
			},
			tradeChange(e) {
				if (e.detail.value == 12) {
					this.trade_status = false;
				} else {
					this.trade_status = true;
				}
				this.form.trade = e.detail.value;
			},
			BackPage() {
				uni.navigateBack({
					delta: 1
				});
			},
			idchange(e) {
				this.form.id_type = e.detail.value;
			},
			getInfo: async function(id) {
				let res = await this.$api.jiaoyiInfo();
				if (res) {
					this.form=res;
				}
			
			}
		}
	}
</script>

<style scoped>
	.progress1 .progress-line1 {
		width: 72rpx;
	}

	input {
		color: black;
	}
</style>